/* 
  学习目标：useEffect使用第二个参数，模拟生命周期
  第二个参数作用：如果传递了第二个参数，也就依赖项， [ 依赖项1，依赖项2 ...]
  那么在依赖项改变时，才会触发 useEffect，类似 vue - watch
*/

// 1. 导入 useState钩子函数： 声明状态
import React, { useEffect, useState } from 'react';

export default function App() {
  // 返回值是一个数组--[状态变量，更新状态的函数]
  const [count, setCount] = useState(100);
  // 导入useEffect钩子函数: 会自动执行
  // useEffect(() => {
  //   console.log('useEffect被触发了----->');
  //   document.title = count;
  // });

  // 注意：useEffect是函数，函数可以调用多次，谁也不影响
  // 设置依赖项count，他才会触发，也就是页面更新是，都会触发useEffect
  useEffect(() => {
    console.log('useEffect被触发了----->');
    document.title = count;
  }, [count]);
  return (
    <div>
      <h3>count：{count}</h3>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        点我修改count和标题
      </button>
    </div>
  );
}
